<template>
    <el-tooltip :placement="placement" popper-class="share-tooltip" effect="light">
        <div slot="content">
            <div class="qscode-img">
                <img :src="qrCode" alt="">
                <span v-if="isShareIcon" class="icon-img">
                    <img :src="shareIcon" alt="">
                </span>
            </div>
        </div>
        <slot name="button">
            <span class="share-btn"><i class="el-icon-share"></i>分享</span>
        </slot>
    </el-tooltip>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Component
} from 'nuxt-property-decorator'
const QRCode = require('qrcode')
@Component({
    name: '',
    components: {}
})
export default class PageTest extends Vue {
    qrCode: any = ''
    link: any = ''
    // 生成二维码
    createQRCode () {
        if (!this.link) {
            return false
        }
        QRCode.toDataURL(this.link, {width: this.codeWidth, margin: 2})
            .then((url: any) => {
                this.qrCode = url
            })
    }
    @Prop({
        default: 'H',
        type: String
    }) shareType !: String
    @Prop({
        default: '',
        type: String
    }) shareLink !: String
    @Prop({
        default: 'bottom-start',
        type: String
    }) placement !: String
    @Prop({
        default: '120',
        type: String
    }) codeWidth !: String
    @Prop({
        default: true
    }) isShareIcon !: Boolean
    @Prop({
        default: '/favicon.ico',
        type: String
    }) shareIcon !: String
    @Watch('shareLink', {immediate: true})
    shareLinkFn (val: any) {
        this.link = val || ''
        try {
            if (window) {
                if (!val) {
                    this.link = window.location.href
                }
                this.createQRCode()
            }
        } catch (e) {}
    }
}
</script>

<style scoped lang="scss">
    $white: #fff;
    $default-font-size: 14px;
    $black: #333;
    $hoverColor: #ddd;
    .qscode-img{
        position: relative;
        .icon-img{
            position: absolute;
            width: 20%;
            height: 20%;
            left: 40%;
            top: 40%;
            padding: 2px;
            background-color: $white;
            border-radius: 4px;
            box-sizing: border-box;
            img{
                border-radius: 4px;
                width: 100%;
                height: 100%;
            }
        }
    }
    .share-btn{
        font-size: $default-font-size;
        color: $black;
        cursor: pointer;
        i{
            font-size: 18px;
            margin-right: 5px;
        }
        &:hover{
            color: $hoverColor;
        }
    }
</style>
<style lang="scss">
    $shareTooltipBoderColor: #d9d9d9;
    .el-tooltip__popper{
        &.is-light{
            &.share-tooltip{
                z-index: 999999 !important;
                padding: 0;
                border-radius: 0;
                border: 1px solid $shareTooltipBoderColor;
                box-shadow: 0 3px 3px $shareTooltipBoderColor;
                &[x-placement^=bottom] .popper__arrow {
                    border-bottom-color: $shareTooltipBoderColor;
                }
                &[x-placement^=top] .popper__arrow {
                    border-top-color: $shareTooltipBoderColor;
                }
            }
        }
    }
</style>
